<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="pie1Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

const animationDuration = 2000;
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init(newData) {
			var ydata = [
				{
					name: "财务管理决策实训",
					value: 18,
				},
				{
					name: "商品流通业实训",
					value: 16,
				},
				{
					name: "暖心陪伴（津乐园20cm定制蛋糕）",
					value: 15,
				},
				{
					name: "嘉果荟萃（津乐园20cm定制蛋糕）",
					value: 14,
				},
				{
					name: "优雅圆舞曲（津乐园20cm）",
					value: 10,
				},
				{
					name: "巧克力之夏（津乐园20cm定制蛋糕）",
					value: 7.9,
				},
				{
					name: "财税宝4G",
					value: 6.7,
				},
				{
					name: "成本会计",
					value: 6,
				},
				{
					name: "纳税会计与筹划",
					value: 4.5,
				},
				{
					name: "金融担保业实训",
					value: 3,
				},
			];
			var color = [
				"#8d7fec",
				"#5085f2",
				"#e75fc3",
				"#f87be2",
				"#f2719a",
				"#fca4bb",
				"#f59a8f",
				"#fdb301",
				"#57e7ec",
				"#cf9ef1",
			];
			var xdata = [
				"财务管理决策实训",
				"商品流通业实训",
				"暖心陪伴（津乐园20cm定制蛋糕）",
				"嘉果荟萃（津乐园20cm定制蛋糕）",
				"优雅圆舞曲（津乐园20cm）",
				"巧克力之夏（津乐园20cm定制蛋糕）",
				"财税宝4G",
				"成本会计",
				"纳税会计与筹划",
				"金融担保业实训",
			];

			this.options = {
				color: color,
				grid: {
					left: "2%",
					right: "2%",
					bottom: "5%",
					top: "30px",
					containLabel: true,
				},
				legend: {
					orient: "vartical",
					x: "right",
					top: "center",
					// left: "60%",
					// bottom: "0%",
					data: xdata,
					itemWidth: 8,
					itemHeight: 8,
					itemGap: 16,
					/* formatter:function(name){
            var oa = option.series[0].data;
            var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
            for(var i = 0; i < option.series[0].data.length; i++){
                if(name==oa[i].name){
                    return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                }
            }
          }*/

					formatter: function (name) {
						return "" + name;
					},
					textStyle: {
						fontSize: 12,
						color: "#ddd",
						// rich 自定义富文本样式
						rich: {
							a: {
								verticalAlign: "bottom",
							},
						},
					},
				},

				series: [
					{
						type: "pie",
						clockwise: false, // 饼图的扇区是否是顺时针排布
						minAngle: 2, // 最小的扇区角度（0 ~ 360）
						radius: ["40%", "70%"],
						center: ["30%", "50%"],
						avoidLabelOverlap: false,
						itemStyle: {
							// 图形样式
							borderColor: "#032049",
							borderWidth: 10,
						},

						emphasis: {
							label: {
								show: true,
								color: "inherit",
								// textStyle: {
								// 	fontSize: 24,
								// },
							},
						},
						label: {
							show: false,
							position: "center",
							formatter: "{text|{b}}\n{c} ({d}%)",
							rich: {
								text: {
									color: "#ddd",
									fontSize: 14,
									align: "center",
									verticalAlign: "middle",
									padding: 8,
								},
								value: {
									color: "#ddd",
									fontSize: 24,
									align: "center",
									verticalAlign: "middle",
								},
							},
						},
						data: ydata,
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
